<template>
    <div>
        <h2>{{msg}}</h2>
        <hr>
        <SchoolInfo/>
        <hr>
        <!-- <StudentInfo v-on:bigzq="getStudentName" />  -->
        <!-- 使用自定义组件事件解释：  在子组件StudentInfo上【VC对象上】，绑定了一个事件bigzq,在触发的时候会调用getStudentName函数 -->
        <!-- 由于v-on是在组件标签上，实际上是给组件的对象VC上绑定一个事件，事件名字叫bigzq,如果被触发，demo就会被触发 -->
        <!-- 通过父组件给子组件绑定一个自定义事件，实现子组件给父传递数据 -->

        <!-- 更灵活性的方式 -->
        <StudentInfo ref="student" /> 
        <!-- this.$refs.student就可以获得子组件的vc实例 -->
       
    </div>
</template>

<script>
import SchoolInfo from './components/SchoolInfo'
import StudentInfo from './components/StudentInfo'
export default {
    name:'App',
    components:{
        SchoolInfo,
        StudentInfo
    },data() {
        return {
            msg:"欢迎学习Vue"
        }
    },methods: {
       getStudentName(name,...a){
          console.log("App收到子组件的消息学生name",name);
       }
    },
    mounted() {
      this.$refs.student.$on('bigzq',this.getStudentName)  //当app挂在完毕后，在子组件上绑定bigzq事件为
    },
}
</script>

<style scope>

</style>